<!-- 个人中心页面 -->
<template>
  <div class="member-home">
    <!-- 概览 -->
    <HomeOverview />
    <!-- 收藏 -->
    <HomePanel title="我的收藏">
      <GoodsItem v-for="item in CollectGoods" :key="i" :goods="item" />
    </HomePanel>
    <!-- 足迹 -->
    <HomePanel title="我的足迹">
      <GoodsItem v-for="item in BrowseHistoryGoods" :key="i" :goods="item" />
    </HomePanel>
    <!-- 猜你喜欢 -->
    <GoodsRelevant />
  </div>
</template>

<script>
import { ref } from "vue";
import { findCollect, findBrowseHistory } from "@/api/member"

import HomeOverview from "./components/home-overview.vue";
import HomePanel from "./components/home-panel.vue";
import GoodsRelevant from "@/views/goods/components/goods-relevant.vue";
import GoodsItem from "@/views/category/components/goods-item.vue";
export default {
  name: "MemberHome",
  setup(props) {
    const CollectGoods = ref(null)
    const BrowseHistoryGoods = ref(null)

    // 获取收藏商品
    findCollect({
      page: 1,
      pageSize: 4
    }).then(data => {
      CollectGoods.value = data.result.items
    })

    // 获取足迹信息
    findBrowseHistory({
      page: 1,
      pageSize: 4
    }).then(data => {
      BrowseHistoryGoods.value = data.result.items
    })

    return { CollectGoods, BrowseHistoryGoods }
  },
  components: {
    HomeOverview,
    HomePanel,
    GoodsRelevant,
    GoodsItem
  }
}
</script>

<style scoped lang="less">
// 商品推荐箭头位置优化
:deep(.carousel) .carousel-btn.prev {
  left: 5px;
}
:deep(.carousel) .carousel-btn.next {
  right: 5px;
}
</style>